<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/plugin/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="/plugin/layui/css/layui.css" />
    <link rel="stylesheet" href="/plugin/swiper/swiper.min.css" />
    <link rel="stylesheet" href="/css/myAnimate.css" />
    <link rel="stylesheet" href="/css/common.css" />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/css/animate.css" />
    <link rel="stylesheet" href="/css/fonts/iconfont.css" />
    <link
      rel="stylesheet"
      href="/plugin/bootstrap/dist/datepicker/datetimepicker.min.css"
    />
    <link rel="stylesheet" href="/plugin/bootstrap/dist/select/select.css" />
    <link rel="stylesheet" href="/plugin/summernote/summernote.css" />
    <link rel="stylesheet" href="/plugin/bootstrap/dist/table/table.css" />
    <link rel="stylesheet" href="/css/theme_gray.css" />
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <script
      type="text/javascript"
      src="/plugin/bootstrap/js/bootstrap.min.js"
    ></script>
    <script type="text/javascript" src="/plugin/layui/layui.js"></script>
    <script
      type="text/javascript"
      src="/plugin/bootstrap/dist/datepicker/datetimepicker.min.js"
    ></script>
    <script
      type="text/javascript"
      src="/plugin/bootstrap/dist/select/select.js"
    ></script>
    <script
      type="text/javascript"
      src="/plugin/summernote/summernote.min.js"
    ></script>
    <script
      type="text/javascript"
      src="/plugin/bootstrap/dist/table/table.js"
    ></script>
  </head>
  <body class="child_body">
    <div class="comModal">
      <ul class="comTab informationTab clearfix m-b-15">
        <li class="active" data-id="eventType">事件类型</li>
        <li data-id="eventFrom">事件来源</li>
      </ul>
      <div class="viewBox">
        <div id="eventType">
          <div class="searchBox">
            <div class="searchBtnBox flex">
              <div class="flex-1 flex">
                <div class="customForm flex m-r-5">
                  <label>通报函号：</label>
                  <input class="flex-1 form-control" placeholder="" />
                </div>
                <button type="button" class="btn btn-info btn-sm m-r-5">
                  <span class="iconfont icon-search"></span>
                  <span class="text">查询</span>
                </button>
                <button type="button" class="btn btn-default btn-sm m-r-10">
                  <span class="iconfont icon-reset"></span>
                  <span class="text">重置</span>
                </button>
                <div class="customForm pointer showMoreFilter">
                  <span class="iconfont icon-filter"></span>
                  <span>高级筛选</span>
                </div>
              </div>
              <div>
                <button
                  type="button"
                  class="btn btn-info btn-sm"
                  onclick="changeView(this)"
                >
                  <span class="iconfont icon-reset"></span>
                  <span class="text">转为二级分类试图</span>
                </button>
                <button
                  type="button"
                  class="btn btn-info btn-sm"
                  onclick="showForm()"
                >
                  <span class="iconfont icon-add-thin"></span>
                  <span class="text">新增</span>
                </button>
                <button
                  type="button"
                  disabled="disabled"
                  class="btn btn-danger btn-sm"
                >
                  <span class="iconfont icon-delete"></span>
                  <span class="text">删除</span>
                </button>
              </div>
            </div>
            <div class="searchForm form-inline row">
              <span class="searchFormClose iconfont icon-close-rs"></span>
              <div class="formItem col-md-4 flex">
                <label class="form-label">输入框</label>
                <input
                  type="text"
                  class="flex-1 form-control"
                  placeholder="请输入用户名"
                />
              </div>
              <div class="formItem col-md-4 flex">
                <label class="form-label">下拉单选</label>
                <select
                  class="flex-1 selectpicker"
                  title="请选择"
                  onchange="selectChange(this)"
                >
                  <option>Mustard</option>
                  <option>Ketchup</option>
                  <option>Barbecue</option>
                </select>
              </div>
              <div class="formItem col-md-4 flex">
                <label class="form-label">下拉多选</label>
                <div id="selectTest" class="comSelectBox"></div>
                <!-- <select class="flex-1 comSelecct" multiple title="请选择">
                          <option>Mustard</option>
                          <option>Ketchup</option>
                          <option>Barbecue</option>
                        </select> -->
                <!-- <select name="city" lay-verify="" multiple>
                          <option value="">请选择一个城市</option>
                          <option value="010">北京</option>
                          <option value="021">上海</option>
                          <option value="0571">杭州</option>
                        </select> -->
              </div>
              <div class="formItem col-md-4 flex">
                <label class="form-label">时间选择</label>
                <div class="flex-1 fullWidth" id="datetimepicker"></div>
              </div>
              <div class="formItem col-md-4 flex">
                <label class="form-label">时间区间</label>
                <div
                  id="comDateArea"
                  class="comTimeRange flex-1 fullWidth"
                ></div>
              </div>
            </div>
          </div>
          <div class="p-l-r-15 p-b-15">
            <!-- <table
              class="layui-hide"
              id="bootstrapTable"
              lay-filter="bootstrapTable"
            ></table> -->
            <div class="viewTableBox">
              <table class="table" id="bootstrapTable"></table>
            </div>
            <div class="viewChat flex wrap hide">
              <ul class="chatItem flex">
                <li class="flex item justify-center">
                  <div class="viewBox rightLine blue">一级事件</div>
                </li>
                <li class="line"></li>
                <li class="flex item flex-col justify-center">
                  <div class="viewBox leftLine orange">二级事件1</div>
                  <div class="viewBox leftLine orange">二级事件2</div>
                  <div class="viewBox leftLine orange">二级事件3</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div id="eventFrom" class="hide">
          <div class="searchBox">
            <div class="customForm flex items-center">
              <label class="m-r-15">自动生成通报函号</label>
              <div class="flex-1 comRadioBox">
                <label class="radio-inline">
                  <input type="radio" id="inlineCheckbox1" value="option1" />
                  启用
                </label>
                <label class="radio-inline">
                  <input type="radio" id="inlineCheckbox2" value="option2" />
                  不启用
                </label>
              </div>
            </div>
            <div class="red lineheight30 m-b-5">备注：提示</div>
            <div class="searchBtnBox flex">
              <div class="flex-1 flex">
                <div class="customForm flex m-r-5">
                  <label>关键词&nbsp;</label>
                  <input class="flex-1 form-control" placeholder="" />
                </div>
                <button type="button" class="btn btn-info btn-sm m-r-5">
                  <span class="iconfont icon-search"></span>
                  <span class="text">查询</span>
                </button>
                <button type="button" class="btn btn-default btn-sm m-r-10">
                  <span class="iconfont icon-reset"></span>
                  <span class="text">重置</span>
                </button>
                <div class="customForm pointer showMoreFilter">
                  <span class="iconfont icon-filter"></span>
                  <span>高级筛选</span>
                </div>
              </div>
            </div>
          </div>
          <div class="p-l-r-15 p-b-15">
            <table
              class="layui-hide"
              id="bootstrapTableTow"
              lay-filter="bootstrapTableTow"
            ></table>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/html" id="barDemo">
    <a class="btn btn-info btn-xs" lay-event="detail">查看</a>
    <a class="btn btn-default btn-xs tableMoreOper" lay-event="more">
      <i class="iconfont icon-more-ellipsis"></i>
      <ul class="tableOperList">
        <li class="item" onclick="changePassWord()">
          <span class="iconfont icon-user m-r-10"></span>
          <span class="text">操作2</span>
        </li>
        <li class="item border-top">
          <span class="iconfont icon-exit m-r-10"></span>
          <span class="text">操作1</span>
        </li>
      </ul>
    </a>
  </script>
  <script>
    $(function () {
      bindComEvent();
      $.comSelect({
        id: "selectTest",
        type: "checkbox", //或者Radio
        data: [
          { id: 1001, name: "账单" },
          { id: 1002, name: "文档" },
        ],
      });
      //tab点击
      $(".informationTab li")
        .off("click")
        .on("click", function () {
          var id = $(this).data("id");
          $(".viewBox > div").addClass("hide");
          $("#" + id).removeClass("hide");
          $(this).addClass("active").siblings().removeClass("active");
          if ($(this).index() == 0) {
            initTable1();
          } else {
            initTable2();
          }
        });
      $("#datetimepicker").datePicker({
        dateType: "date",
        format: "datetime",
      });
      $("#comDateArea").datePicker({
        dateType: "daterange",
        format: "datemin",
        rangeValue: ["2023-12-30 12:20", "2023-12-30 13:20"],
      });
      // $("#datetimeArea").datetimepicker({
      //   language: "zh-CN",
      // });
      // 初始化表格,动态从服务器加载数据
      initTable1();
    });
    function initTable1() {
      $.layuiTable({
        id: "bootstrapTable",
        cols: [
          { type: "checkbox", align: "center" },
          {
            type: "numbers",
            title: "序号",
          },
          { field: "username", title: "一级事件类型" },
          {
            field: "nums",
            title: "包含二级事件类型数量",
            templet: function (d) {
              return "<a class='blue'>" + d.nums + "</a>";
            },
          },

          { field: "createBy", title: "创建人" },
          { field: "createTime", title: "创建时间" },
          {
            title: "操作",
            width: 150,
            align: "center",
            templet: function (value, row, index) {
              return (
                '<a class="btn btn-info btn-xs m-r-5">查看</a>' +
                '<a class="btn btn-info btn-xs m-r-5">编辑</a>'
              );
            },
          },
        ],
        data: [
          {
            index: 1,
            username: "test1",
            id: 1001,
            nums: 10,
            createBy: "张三",
            createTime: "2024-02-04",
          },
          {
            index: 2,
            username: "test2",
            id: 1002,
            nums: 5,
            createBy: "张三",
            createTime: "2024-02-04",
          },
        ],
        callback: function () {
          //添加按钮事件
        },
      });
      // $.layuiTable({
      //   id: "bootstrapTable",
      //   done: bindTableEvent,
      //   cols: [
      //     //表头
      //     { type: "checkbox", fixed: "left" },
      //     {
      //       title: "序号",
      //       field: "index",
      //       align: "center",
      //       width: 60,
      //       fixed: "left",
      //       formatter: function (value, row) {
      //         return "<span>" + row.index + "</span>";
      //       },
      //     },
      //     { field: "username", title: "一级事件类型" },
      //     {
      //       field: "nums",
      //       title: "包含二级事件类型数量",
      //       formatter: function (value, row, index) {
      //         return "<a class='blue'>" + value + "</a>";
      //       },
      //     },

      //     { field: "createBy", title: "创建人" },
      //     { field: "createTime", title: "创建时间" },
      //     {
      //       fixed: "right",
      //       title: "操作",
      //       width: 150,
      //       align: "center",
      //       toolbar: "#barDemo",
      //     },
      //   ],
      //   data: [
      //     {
      //       index: 1,
      //       username: "test1",
      //       id: 1001,
      //       nums: 10,
      //       createBy: "张三",
      //       createTime: "2024-02-04",
      //     },
      //     {
      //       index: 2,
      //       username: "test2",
      //       id: 1002,
      //       nums: 5,
      //       createBy: "张三",
      //       createTime: "2024-02-04",
      //     },
      //   ],
      // });
    }
    function initTable2() {
      $.layuiTable({
        id: "bootstrapTableTow",
        // done: bindTableEvent,
        cols: [
          //表头
          { type: "checkbox", fixed: "left" },
          {
            field: "id",
            title: "ID",
            width: 80,
            sort: true,
            fixed: "left",
            totalRowText: "合计：",
          },
          { field: "username", title: "用户名", width: 80 },
          {
            field: "experience",
            title: "积分",
            sort: true,
            totalRow: true,
          },
          { field: "sex", title: "性别", sort: true },
          {
            field: "score",
            title: "评分",
            sort: true,
            totalRow: "{{ parseInt(d.TOTAL_NUMS) }} 分",
          },
          { field: "city", title: "城市" },
          { field: "sign", title: "签名" },
          { field: "classify", title: "职业" },
          {
            field: "wealth",
            title: "财富",
            width: 135,
            sort: true,
            totalRow: true,
          },
          {
            fixed: "right",
            title: "操作",
            width: 150,
            align: "center",
            toolbar: "#barDemo",
          },
        ],
        data: [
          { username: "test1", id: 1001 },
          { username: "test2", id: 1002 },
        ],
      });
    }
    function bindTableEvent() {
      // $("#bootstrapTable")
      //   .off("click", ".pwdReset")
      //   .on("click", ".pwdReset", function () {
      //     $.myConfirm({
      //       message: "测试我的内同",
      //       type: "show",
      //     });
      //   })
      //   .off("click", ".disableBtn")
      //   .on("click", ".disableBtn", function () {
      //     alert("禁用");
      //   })
      //   .off("click", ".delBtn")
      //   .on("click", ".delBtn", function () {
      //     $.myConfirm({
      //       message: "确认删除吗",
      //       type: "show",
      //       callback: function () {
      //         console.log("删除了 ");
      //       },
      //     });
      //   })
      //   .off("click", ".dispath")
      //   .on("click", ".dispath", function () {
      //     $("#dispatchDialog").modal("show");
      //   });
      $(".layui-table-view[lay-id=bootstrapTable] .tableMoreOper").hover(
        function (event) {
          var offset = $(this).offset();
          console.log(event);
          var xPos =
            event.pageX - 140 - event.offsetX + $(event.currentTarget).width();
          var yPos = event.pageY + 22 - event.offsetY;
          $(this)
            .children("ul")
            .css({ left: xPos + "px", top: yPos + "px" })
            .show();
        },
        function () {
          $(this).children("ul").hide();
        }
      );
    }
    function changeView(obj) {
      $(".viewTableBox").toggleClass("hide");
      $(".viewChat").toggleClass("hide");
      if ($(".viewTableBox").hasClass("hide")) {
        $(obj).find(".text").html("转一级分类试图");
      } else {
        $(obj).find(".text").html("转为二级分类试图");
      }
    }
    function operateFormatter(value, row, index) {
      //添加按钮
      var rows = JSON.stringify(row);
      // 根据传过来的参数添加不同的class
      var classED = "enabledE";
      var classEDVal;
      if (row.status == "启用") {
        classED = "enabledD";
        classEDVal = "禁用";
      } else {
        classED = "enabledE";
        classEDVal = "启用";
      }
      // onclick=modif(' + value + "," + rows + "," + index + ')
      return [
        '<a href="javascript:;" class="link m-r-10">查看</a>' +
          '<a href="javascript:;" class="link m-r-10">导出通报函</a>' +
          '<a href="javascript:;" class="link m-r-10">上传通报函</a>' +
          '<a href="javascript:;" class="link dispath">派发</a>',
      ].join("");
    }
    function getSelection() {
      console.log($("#bootstrapTable").bootstrapTable("getAllSelections"));
    }
    function selectChange(obg) {}
    function showForm() {
      var width = $("#testSideForm").width();
      $("#testSideForm").css("margin-right", "-" + width / 2 + "px");
      $("#testSideForm")
        .removeClass("animate__fadeOutRight")
        .addClass("animate__fadeInRight")
        .show();
      $("#myEditer").summernote("destroy");
      //初始化
      $("#myEditer").summernote({
        height: 300,
        width: "100%",
        tabsize: 2,
        placeholder: "请输入",
        lang: "zh-CN",
        callbacks: {
          onImageUpload: function (files) {
            sendFile(files);
          },
        },
      });
      //获取值
      //   $("#myEditer").summernote("code");
      //主动赋值
      $("#myEditer").summernote("code", "<h3>测试</h3>");
      $("#formDatePicker").datePicker({
        dateType: "date",
        format: "date",
      });
      $("#formDateAreaPicker").datePicker({
        dateType: "daterange",
        format: "date",
      });
    }
    function hideSideForm() {
      $("#testSideForm")
        .removeClass("animate__fadeInRight")
        .addClass("animate__fadeOutRight");
      setTimeout(() => {
        $("#testSideForm").hide();
      }, 500);
    }
    function fileChange(e) {
      preview(e, "myPicList", true);
    }
    function fileUploadChange(e) {
      InitFileView(e, "fileUploadTest");
      $("#fileUploadTest .iconfont")
        .off("click")
        .on("click", function () {
          $(this).siblings(".name").text("");
          $(this).parent(".fileName").hide().siblings(".btn").show();
        });
    }
  </script>
</html>
